<!--
 * @Author: vectorwings
 * @Email: vectorwings@163.com
 * @GitHub: https://github.com/vector-wings/
 * @Company: Copyright 2019 HuaZhuTech, Inc.
 * @Date: 2019-10-24 20:57:54
 * @LastEditors: vectorwings
 * @LastEditTime: 2019-10-25 16:19:03
 * @Description: 任务台账-详情页面
 -->

<template>
  <div class="section">
    <div class="header">
      <!-- header 开始 -->
      <mu-appbar color="primary" class="lan-header" style="margin-bottom:1px;" v-if="!problemId">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left "></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        检查任务内容
      </mu-appbar>
      <div class="box has-shadow" style="padding:0 0.05rem;">
        <mTabs class="self" v-model="active"  :tabList="tabBars" @change="handleTopTabChange()"/>
      </div>
      <!-- header 结束 -->
    </div>
    <!-- 主体开始 -->
    <section>
      <mu-container>
        <!-- tab 对应页面开始 -->
        <!--任务台账-详情页面-概要信息-->
        <div class="bottom">
          <task-summary-card v-show="active === 0" :obj="obj"></task-summary-card>
          <!--任务台账-详情页面-排查问题-->
          <trouble-shooting-card v-if="active === 1" :problems="problems"></trouble-shooting-card>
          <!--任务台账-详情页面-检查记录-->
          <inspection-record-card @inspection="inspection" v-show="active === 2" :problemArray="problemArray"></inspection-record-card>
          <!--任务台账-详情页面-检查内容-->
          <inspection-content-card v-if="active === 3" :tableList="tableList"></inspection-content-card>
          <!--<inspection-record-card2 v-if="active === 4"></inspection-record-card2>-->
          <!-- tab 对应页面结束 -->
        </div>
      </mu-container>
    </section>
    <!-- 主体结束 -->
  </div>
</template>

<script>

  import mTabs from "./../../../../components/tabs/mTabs";

  import TaskSummaryCard from './components/TaskSummaryCard'
  import TroubleShootingCard from './components/TroubleShootingCard'
  import InspectionRecordCard from './components/InspectionRecordCard'
  import InspectionRecordCard2 from './components/InspectionRecordCards'
  import InspectionContentCard from './components/InspectionContentCard'

  export default {
    name: "task-parameter-detail",
    components: {
      mTabs,
      TaskSummaryCard,
      TroubleShootingCard,
      InspectionRecordCard,
      InspectionRecordCard2,
      InspectionContentCard
    },
    data () {
      return {
        problemArray:[],
        id:'',
        obj:{},
        active: 0,
        shows:false,
        tabBars: [
          {
            name: "概要信息",
            id: 0
          },
          {
            name: "排查问题",
            id: 1
          },
          {
            name: "检查记录",
            id: 2
          },
          {
            name: "检查内容",
            id: 3,

          }
        ],
        problems:'',
        pageSize: 10,
        pageNo: 0,
        totalPage:1,
      };
    },
    mounted () {
    },
    props: {
      problemId: {
        type: String,
        default: ''
      },
    },
    created () {
      console.log(this.problemId);
      if(this.problemId){
        this.id = this.problemId
      }else{
        this.id = this.$route.query.info
      }
       console.log(this.id);
      // this.id = this.$route.query.info;
      let params = {
        id : this.id,
      };
      this.$A.Go("get", '/safety/checkPlan/detail', params).then(
        response => {
          if (response.code == 200) {
            console.log(response.body);
            this.obj = response.body;
            console.log(response.body.tableList.length);
            if (response.body.tableList.length === 0) {
              this.tabBars= [
                {
                  name: "概要信息",
                  id: 0
                },
                {
                  name: "排查问题",
                  id: 1
                },
                {
                  name: "检查记录",
                  id: 2
                },
              ];
              this.problems = response.body.checkProblems;
              console.log(this.problems);
            }else {
              //检查内容
              this.tabBars=[
                {
                  name: "概要信息",
                  id: 0
                },
                {
                  name: "检查内容",
                  id: 3,

                },
                {
                  name: "检查记录",
                  id: 2
                }
              ];
              this.checkTables();
            }
          }else {}
        });

      this.inspection();

    },
    methods: {
      handleTopTabChange () {
      },
      //检查记录详情
      inspection () {
        if (this.pageNo >= this.totalPage) {
          return false
        };
        this.pageNo += 1;
        let obj = {
          checkPlanId : this.id,
          orgId:this.$A.GS("orgInfo")["orgId"],
          type: this.$A.GS("orgInfo")["type"],
          current: this.pageNo,
          size: this.pageSize,
        };
        this.$A.Go("get", '/safety/checkTask/webRec/pageList', obj).then(
          response => {
            if (response.code == 200) {
              console.log(response.body);
              if (response.body.rows.length != 0) {
                let data = response.body.rows || [];
                this.problemArray = this.problemArray.concat(data);

                let total = response.body.page.rows|| '0';
                this.totalPage = Math.ceil(total /this.pageSize);
                console.log(this.problemArray);
              }
            }else {}
          })
      },
      //
      checkTables () {
        let params = {
          checkPlanId: this.id,
        };
        this.$A.Go("get", '/safety/checkPlan/checkTables', params).then(
          response => {
            if (response.code == 200){
              this.tableList = response.body;
            }
          })
      }
    }
  };
</script>
<style lang="scss" scoped>
  /*.box{*/
    /*.self /deep/ p{*/
      /*font-size: 0.15rem;*/
    /*}*/
  /*}*/
  .section{
    display:flex ;
    flex-direction: column;
    height:100%;
    background: white;
    .header{
      -height:0.9rem;
    }
    section{
      display: flex;
      flex-direction:column;
      flex:1;
      overflow-y: scroll;
    }
  }
</style>
